<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component :is="item.content" :activeValue="activeValue" v-bind="$attrs"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import ManualManage from './manual-processing/manual-manage.vue';
import StrictCheck from './manual-processing/strict-check.vue';

@Component({ name: 'ManualProcessing', components: { StrictCheck, ManualManage } })
export default class ManualProcessing extends Vue {
    // TODO strict-check
    activeValue: string = 'strict-check';
    panes: any[] = [
        {
            label: '系统偏严指标复核',
            name: 'strict-check',
            content: 'StrictCheck',
        },
        {
            label: '人工录入管理',
            name: 'manual-manage',
            content: 'ManualManage',
        },
    ];

    @Watch('$attrs.echartParams', { deep: true })
    async handleEchartParams() {
        let { name, params, isClick }: any = this.$attrs.echartParams;
        if (this.$attrs.activeValue === 'manual-processing' && !isClick) {
            console.log(name, this.$attrs.activeValue, params, 'params');
            this.activeValue = name[1];
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-tabs {
    .el-tabs__content {
        padding: 10px 0 !important;
    }
}
</style>
